@extends('mobile.inc.common')
@section('title')
	<title>{{$cate_info->cate_name}} - 奇异果聚合</title>
	<meta name="keywords" content="{{$cate_info->seo_key}}" />
	<meta name="description" content="{{$cate_info->seo_intro}}" />
@endsection
@section('content')
	<div id="slideBox" class="slideBox" style="margin-top: 90px;">

		<div class="bd">

		</div>

		<div class="hd">
			<ul></ul>
		</div>
	</div>

	<div class="news-sort am-g">
		<div class="am-u-sm-4">
			<a class="news-sort-bg" >
				<img src="{{asset('mobile/images/news/fire-white.png')}}" /> {{$cate_info->cate_name}}
			</a>
		</div>
	</div>
	<!--挂图-->
	<div class="news-content">
		<div data-am-widget="intro" class="am-intro am-cf am-intro-default news-content-block">
			@foreach($archives as $archive)
				<div class="am-g am-intro-bd">
					<div class="am-intro-left am-u-sm-5 news-intro-left">
						<a href="{{route('article.show_m', [$archive->id])}}"><img src="{{route('image', [trim($archive->cover, '/'), '265x155'])}}" alt="小娜" /></a>
					</div>
					<div class="am-intro-right am-u-sm-7 news-intro-r">
						<h2><a href="{{route('article.show_m', [$archive->id])}}">{{mb_substr($archive->title,0,15)}}</a></h2>
						<p>{{mb_substr($archive->abstract,0,90)}}</p>

					</div>
					<div class="am-u-sm-12 news-tabs">
						<dl class="tab">
							@foreach($archive->tags()->get() as $tag)
								<dt style="background:#{{$tag->background_color or '0C80BA'}};"><a href="{{$tag->url}}">{{$tag->name}}</a></dt>
							@endforeach
						</dl>

						<button class="news-content-btn-more -mob-share-open" ></button>
						<button class="news-content-comment"><span class="has-comment"></span></button>
						@include('mobile.inc.share')
					</div>
				</div>
			@endforeach
		</div>
	</div>

	<div class="news-content-block news-more-btn" >
		<button>加载更多</button>
	</div>
	<div class="news-content-block news-more-btn" style="display: none;">
		<button>收起列表</button>
	</div>

	<script>
        $(function(){
            var page = 0;
            $(".news-more-btn").click(function(){
                var cate_id = "{{$cate_info->cate_id}}";
                var token = "{{csrf_token()}}";
                var $this = $(this)
                $.ajax({
                    url:"{{url('article/more')}}",
                    type:"post",
                    data:{cate_id:cate_id,_token:token,page:page},
                    success:function(data){
                        if(data.length==0){
                            $this.find('button').text('没有更多了！');
                        }else {
                            for(var i=0;i<data.length;i++){
                                $('.am-intro').append(
                                    '<div class="am-g am-intro-bd">\
                                    <div class="am-intro-left am-u-sm-5 news-intro-left">\
                                    <a href="'+data[i].url+'"><img src="'+data[i].img+'" alt="'+data[i].title+'" /></a>\
                                    </div>\
                                    <div class="am-intro-right am-u-sm-7 news-intro-r">\
                                    <h2><a href="'+data[i].url+'">'+data[i].title+'</a></h2>\
                                    <p>'+data[i].abstract+'</p>\
                                    </div>\
                                    <div class="am-u-sm-12 news-tabs">\
                                    <dl class="tab">'+
									data[i].tags.map(function (tag) {
									    return '<dt style="background:#'+tag.background_color ? tag.background_color : '0C80BA'+';"><a href="'+tag.url+'">'+tag.name+'</a></dt>'
									}).join('\n')
									+'</dl>\
                                    <button class="news-content-btn-more" data-am-modal="{target: "#news-share"}"></button>\
                                    <button class="news-content-comment"><span class="has-comment"></span></button>\
                                    </div>\
                                    </div>'
                                    );
                            }
                            page += 1;
                        }
                    }
                });
            });
        });
	</script>
@endsection